<template>
  <div>
    <el-button @click="centerDialogVisible = true">新建广告位</el-button>
    <div>
      <el-dialog title="新建广告位" :visible.sync="centerDialogVisible" width="60%" center :before-close="cancel">
        <div class="dialog">
          <span>选择轮播图广告:</span>
          <el-select v-model="value" placeholder="请选择">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
          <p class="imgbox">上传轮播图封面:(图片建议尺寸:375px*150px)</p>
          <div class="flex">
            <transition name="el-fade-in-linear">
              <div class="imgbor" v-show="!modes">
                <img :src="modefimg" alt>
                <div class="mask">
                  <i class="el-icon-delete" @click="deletecs"></i>
                </div>
              </div>
            </transition>
            <transition name="el-fade-in">
              <el-upload name="file" action="/admin/tool/upLoadToOss" list-type="picture-card" ref="upload" :before-upload="beforeUpload" :on-success="onSuccessImages" :on-preview="handlePictureCardPreview" :on-remove="handleRemove" v-show="modes">
                <i class="el-icon-plus"></i>
              </el-upload>
            </transition>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" class="boxds" :src="dialogImageUrl" alt>
            </el-dialog>
          </div>

          <p class="timer">请选择投放时间段:</p>
          <el-date-picker v-model="time" type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00']" value-format="timestamp"></el-date-picker>

          <p class="solet">
            请输入跳转地址:(外链请去公众平台开通跳转权限)
            <span class="waring">请必须携带https://协议头</span>
          </p>
          <el-input v-model="content" placeholder="请输入内容" @input="onchang"></el-input>
          <p v-show="hide" class="hide">请填写以https://协议开头的链接</p>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="save">保存</el-button>
        </span>
      </el-dialog>
    </div>
    <div class="table">
      <el-table :data="tableData" style="width:80%">
        <el-table-column label="id" width="100" align="center">
          <template slot-scope="scope">
            <p>{{scope.row.id}}</p>
          </template>
        </el-table-column>
        <el-table-column label="日期" width="300" align="center">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span>{{timerformat(scope.row.starttime)}}</span>
            -
            <span>{{timerformat(scope.row.endtime)}}</span>
          </template>
        </el-table-column>
        <el-table-column label="展示位置" width="250" align="center">
          <template slot-scope="scope">
            <p>{{scope.row.area==1?('首页'):scope.row.area==2?('乡旅推荐'):('旅说')}}</p>
          </template>
        </el-table-column>
        <el-table-column label="封面图" width="350" align="center">
          <template slot-scope="scope">
            <img :src="scope.row.image" alt class="cover">
          </template>
        </el-table-column>
        <el-table-column label="跳转地址" width="200" align="center">
          <template slot-scope="scope">
            <p>{{scope.row.url}}</p>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="danger" @click="modify(scope.$index, scope.row)">修改</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      centerDialogVisible: false,
      options: [
        {
          value: "1",
          label: "首页"
        },
        {
          value: "2",
          label: "乡旅推荐"
        },
        {
          value: "3",
          label: "旅说"
        }
      ],
      timerformat: this.$utils.getdates,
      value: "",
      selectvalue: "",
      content: "",
      time: "",
      modes: true,
      tableData: [],
      hide: false,
      modefimg: "",
      id: undefined,
      dialogImageUrl: "",
      dialogVisible: false,
      imgarr: []
    };
  },
  mounted() {
    this.querybannce();
  },
  methods: {
    handleRemove(file, fileList) {
      if (file.response.code == "0000") {
        this.imgarr = [];
      }
    },
    // 获取轮播图
    querybannce() {
      this.$request.post("/admin/banner/query").then(res => {
        this.tableData = res.data.data.list;
      });
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    modify(index, item) {
      console.log(item);
      this.value = item.area.toString();
      this.imgarr.push(item.image);
      this.modefimg = item.image;
      this.modes = false;
      this.id = item.id;
      this.content = item.url;
      this.time = [item.createtime * 1000, item.endtime * 1000];
      this.centerDialogVisible = true;
    },
    deletecs() {
      this.imgarr = [];
      this.modefimg = "";
      this.modes = true;
    },
    beforeUpload(file) {
      //上传前的钩子
      console.log(456);
      if (this.imgarr.length > 0) {
        this.$message.error("最多上传1张图片");
        return false;
      }
      let istype =
        file.type === "image/jpg" ||
        file.type === "image/jpeg" ||
        file.type === "image/png" ||
        file.type === "image/bmp";
      let isSize = file.size / 1024 / 1024 < 5;
      if (!istype) {
        this.$message.error("请用正确的图片格式");
      }
      if (!isSize) {
        this.$message.error("图片超出5M");
      }

      // console.log(isSize,istype)

      return isSize && istype;
    },
    onSuccessImages(response, file, fileList) {
      console.log(response.data);
      this.imgarr.push(...response.data);
    },
    // onchang(e) {
    //   var reg = /(http|https):\/\/([\w.]+\/?)\S*/;
    //   if (this.content == "") {
    //     this.hide = false;
    //   }
    //   if (reg.test(this.content)) {
    //     this.hide = false;
    //   }
    // },
    cancel() {
      this.$refs.upload.clearFiles();
      this.value = "";
      this.modes = true;
      this.time = "";
      this.content = "";
      this.imgarr = [];
      this.centerDialogVisible = false;
    },
    save() {
      var reg = /(http|https):\/\/([\w.]+\/?)\S*/;
      if (this.value == "") {
        this.$message.error("请选择投放位置");
        return;
      }
      if (this.imgarr.length == 0) {
        this.$message.error("请上传图片");
        return;
      }
      if (this.time.length == 0) {
        this.$message.error("请选择投放时间段");
        return;
      }
      this.$request
        .post("/admin/banner/add", {
          title: "测试",
          image: this.imgarr[0],
          url: this.content,
          area: this.value,
          edit: this.id,
          starttime: this.time[0] / 1000,
          endtime: this.time[1] / 1000
        })
        .then(res => {
          console.log(res.data.code);
          if (res.data.code == "0000") {
            this.querybannce();
            this.cancel()
          }
          if (res.data.code == "s004") {
            this.$message.error(res.data.message);
          }
        });
      // if (reg.test(this.content)) {

      // } else {
      //   this.$message.error("请输入正确的URL地址");
      //   return;
      // }
    }
  }
};
</script>

<style scoped lang="less">
.el-dialog__header {
  border: 0 !important;
}

.dialog {
  .imgbox {
    margin: 20px 0;
  }
  .solet {
    margin: 20px 0;
  }
  .waring {
    color: red;
  }
  .hide {
    color: red;
    margin: 20px 0;
  }
  .timer {
    margin: 20px 0;
  }
  .flex {
    display: flex;
  }
}

.el-select {
  width: 110px;
  margin: 0 40px;
}

.el-input {
  width: 350px;
}

.imgbor {
  width: 148px;
  height: 148px;
  border-radius: 6px;
  position: relative;
  margin-right: 20px;
  border: 1px solid #c0ccda;
  img {
    width: 100%;
    height: 100%;
    border-radius: 6px;
  }
  .mask {
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    width: 100%;
    height: 100%;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.5);
    .el-icon-delete {
      position: absolute;
      font-size: 26px;
      top: 50%;
      left: 50%;
      color: #fff;
      margin: -14px 0 0 -14px;
    }
  }
}

.imgbor:hover {
  .mask {
    display: block;
  }
}

.cover {
  width: 180px;
  height: 50px;
}
</style>

